<template>
  <div id="cancelAccountContainer" v-loading="cancelLoading">
    <el-col>
      <div class="grid-content bg-purple-dark span_blo" style="width: 100%; height: 100%">
        <div class="search">
          <el-input v-model.trim="ListParams.subName" size="medium" placeholder="请输入企业全称或简称" @input="GetSubCompanyInput" class="roleInt">
            <el-button slot="append" @click="GetSubCompanyPageList" icon="el-icon-search"></el-button>
          </el-input>
          <span style="font-size: 14px; margin-left: 20px"
            >您还可以创建 <span class="text" style="margin: 0px"> {{ howmany }} </span> 套账</span
          >
        </div>
        <div v-if="jurisdictionControl.addition" @click="newgravitational" class="addCount">
          <span class="addicon" style="font-size: 22px; cursor: pointer">+</span>
          <span class="add" style="font-size: 16px; cursor: pointer">新建账套</span>
        </div>
      </div>
    </el-col>
    <div class="subject" v-loading="loading">
      <el-col v-for="item in balanceList" :key="item.accountId">
        <div class="grid-content bg-purple-dark" style="height: 35%">
          <span class="subject_top_span" @click="operation(item, 'check')">{{ item.abbreviationName ? item.abbreviationName : "" }}</span>
          <ul class="subject_top_List">
            <!-- <li v-if="whether" class="subject_top_item itemradio">
              <span class="item_span">是否显示: </span>
              <el-radio-group v-model="item.isShow" @change="radioIncident($event,item.accountId)">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </li> -->
            <!-- <li class="subject_top_item" @click="Inquiry(item)" v-if="jurisdictionControl.Inquiry && item.accountId">
              <span class="cunZtj">移动查询</span>
            </li> -->
            <!-- <li class="subject_top_item" @click="Documents(item)" v-if="jurisdictionControl.document">
              <span class="cunZtj">文档中心</span>
            </li> -->
            <li class="subject_top_item" v-if="jurisdictionControl.delete || jurisdictionControl.modification || jurisdictionControl.import">
              <el-popover placement="bottom" trigger="hover">
                <ul class="evenmoreList">
                  <li v-if="jurisdictionControl.delete" @click="DeleteAccount(item.subid)">
                    <i class="iconfont iconsize">&#xe612;</i>
                    <span class="item_span"> 删除</span>
                  </li>
                  <li v-if="jurisdictionControl.modification" @click="operation(item, 'edit')">
                    <i class="iconfont">&#xe606;</i>
                    <span class="item_span cunZtj"> 编辑</span>
                  </li>
                  <li v-if="jurisdictionControl.import" @click="$router.push({ name: 'Financial', query: { subid: item.subid, abbreviationName: item.abbreviationName, Import: true } })">
                    <i class="iconfont">&#xe664;</i>
                    <span class="item_span cunZtj"> 导入账套</span>
                  </li>
                </ul>
                <li slot="reference">
                  <span class="cunZtj">更多操作</span>
                </li>
              </el-popover>
            </li>
            <li class="subject_top_item" v-if="jurisdictionControl.enter">
              <el-button type="primary" v-if="item.accountNameList.length <= 1" class="btn" :loading="item.isConfirmLoading" @click="finance(item, item.accountNameList[0])" round>
                <i class="iconfont iconsize">&#xe616;</i>
                <span class="item_span">{{ item.accountNameList && item.accountNameList.length != 0 ? "进入财务" : "创建财务" }}</span>
              </el-button>
              <el-dropdown v-else>
                <el-button type="primary" class="btn" :loading="item.isConfirmLoading" @click="finance(item, item.accountNameList[0])" round>
                  <i class="iconfont iconsize">&#xe616;</i>
                  <span class="item_span">进入财务</span>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(i, index) in item.accountNameList" :key="index">
                    <span @click="finance(item, i)">{{ i.startYm }} - {{ i.accountName }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li class="subject_top_item" v-if="jurisdictionControl.sales">
              <el-button type="primary" class="btn" :loading="item.isConfirmLoading1" @click="EnterBuySellandStock(item)" round>
                <i class="iconfont iconsize">&#xe6af;</i>
                <span class="item_span">{{ item.psiId ? "进入进销存" : "创建进销存" }}</span>
              </el-button>
            </li>
            <li class="subject_top_item" v-if="jurisdictionControl.budget">
              <el-button type="primary" class="btn" :loading="item.isConfirmLoading" @click="Intothebudget(item)" round>
                <i class="iconfont iconsize">&#xe616;</i>
                <span class="item_span">进入预算</span>
              </el-button>
            </li>
          </ul>
        </div>
        <div class="grid-content bg-purple-dark combination">
          <ul class="subject_bottom_List">
            <li class="item">
              <span>账套编码:</span>
              <p>{{ item.subNumber }}</p>
            </li>
            <li class="item_below">
              <span>纳税性质:</span>
              <p>{{ item.taxType == 1 ? "小规模纳税人" : item.taxType == 2 ? "一般纳税人" : "" }}</p>
            </li>
          </ul>
          <ul class="subject_bottom_List">
            <li class="item">
              <span>账套名称:</span>
              <p>{{ item.subName }}</p>
            </li>
          </ul>
          <ul class="subject_bottom_List">
            <li class="item">
              <span>税号:</span>
              <p>{{ item.taxNumber }}</p>
            </li>
          </ul>
        </div>
      </el-col>
      <div v-show="balanceList.length == 0" class="nodata">
        <img src="../../assets/images/available.png" alt="" />
      </div>
    </div>
    <div class="paging">
      <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ListParams.pageIndex" :page-sizes="[10, 20, 50]" :page-size="ListParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="TotalQty" class="pagingChild"></el-pagination>
    </div>
    <!-- 删除弹框 -->
    <delPopup @delPostConfirm="delTreeNodePost" :delPopup="delPopup" />
    <!-- 文档管理 -->
    <el-drawer title="文档管理" :visible.sync="IsDocument" :append-to-body="false" size="750px" direction="rtl" style="z-index: 2000">
      <MyAccount v-if="IsDocument" />
    </el-drawer>
  </div>
</template>
<script>
import { mapState } from "vuex";
import delPopup from "@/components/delPopup";
import { GetSubCompanyDataView } from "@/hooks/update";
import MyAccount from "./MyAccount.vue";
import common from "./mixins/common";
import webUrl from "@/config/otherLink";
export default {
  name: "cancelAccountContainer",
  components: {
    delPopup,
    MyAccount,
  },
  data() {
    return {
      ListParams: {
        pageIndex: 1,
        pageSize: 10,
        subName: "",
      },
      balanceList: [], // 子公司列表
      TotalQty: 0, // 子公司总数
      delPopup: {
        title: "",
        isShow: false,
        type: "",
      },
      delDepParams: "",
      cancelLoading: false,
      howmany: "",
      jurisdictionControl: {
        // 权限
        modification: false, // 修改
        addition: false, // 添加
        delete: false, // 删除
        document: false, // 文档管理
        enter: false, // 进入财务
        sales: false, // 进入进销存
        Inquiry: false, // 移动查询
        budget: false, // 移动查询
      },
      isConfirmLoading: false,
      isConfirmLoading1: false,
      IsDocument: false, //文档管理
      salesId: "",
      loading: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      moduleId: (state) => state.common.moduleId,
      RoleAuthority: (state) => state.common.RoleAuthority,
      uif: (state) => state.common.uif,
    }),
  },
  methods: {
    GetSubCompanyInput() {
      clearTimeout(this.method);
      this.method = setTimeout(() => {
        this.GetSubCompanyPageList();
      }, 500);
    },
    Inquiry(item) {
      // 移动查询
      this.$store.commit("companyInfo/setAccountId", item.accountId);
      this.$store.commit("companyInfo/setPrint", item.subid); // 保存企业id
      this.$router.push({ name: "Inquiry", query: { randomNum: Math.floor(Math.random() * 900) + 100 } });
    },
    Documents(item) {
      // 文档中心
      this.IsDocument = true;
      this.$store.commit("companyInfo/setPrint", item.subid); // 保存企业id
      this.$store.commit("companyInfo/setAccountId", item.accountId); // 保存账套id
    },
    newgravitational() {
      // 新建账套
      if (this.howmany <= 0) {
        this.$message({
          message: "账套数量已用完!",
          type: "warning",
        });
        return;
      }
      this.operation({ level: 0 }, "add");
    },
    finance(item, items) {
      if (!item.accountId) {
        this.$router.push({ name: "Financial", query: { subid: item.subid, abbreviationName: item.abbreviationName } });
        return;
      }
      this.Entertheaccount(items.accountId, item.subid, item);
    },
    GetSubCompanyPageList() {
      // 获取子公司列表
      let params = {
        ...this.ListParams,
      };
      this.loading = true;
      this.$api.companyInfo
        .GetSubCompanyPageList(params)
        .then((res) => {
          let resData = res.data.data;
          this.balanceList = resData.items;
          this.TotalQty = resData.totalCount;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    delTreeNodePost() {
      // 删除账套
      let params = {
        ...this.delDepParams,
      };
      this.$api.companyInfo.DeleteRecycle(params).then((res) => {
        if (res.data.status == 200) {
          this.GetSubCompanyPageList();
          this.GetAccountNum();
          this.$message({ type: "success", message: "删除成功" });
          GetSubCompanyDataView(this);
        }
        this.delPopup.isShow = false;
      });
    },
    getJurisdiction() {
      // 获取权限数据
      let item = this.RoleAuthority.find((item) => {
        return item.name == "企业管理";
      });
      let moduleId = item?.id;
      this.RoleAuthority.forEach((item) => {
        if (item.parentid == moduleId && item.name == "编辑账套") {
          this.jurisdictionControl.modification = true;
        }
        if (item.parentid == moduleId && item.name == "新建账套") {
          this.jurisdictionControl.addition = true;
        }
        if (item.parentid == moduleId && item.name == "删除账套") {
          this.jurisdictionControl.delete = true;
        }
        if (item.parentid == moduleId && item.name == "导入账套") {
          this.jurisdictionControl.import = true;
        }
        if (item.parentid == moduleId && item.name == "进入财务") {
          this.$store.commit("companyInfo/setFinanceId", item.id); // 财务权限id
          this.jurisdictionControl.enter = true;
        }
        if (item.parentid == moduleId && item.name == "进入进销存") {
          this.salesId = item.id; // 进销存权限id
          this.jurisdictionControl.sales = true;
        }
        if (item.parentid == moduleId && item.name == "文档中心") {
          this.jurisdictionControl.document = true;
          this.$store.commit("companyInfo/documentaccountid", item.id);
        }
        if (item.parentid == moduleId && item.name == "移动查询") {
          this.jurisdictionControl.Inquiry = true;
          this.$store.commit("companyInfo/bossaccountid", item.id);
        }
        if (item.parentid == moduleId && item.name == "进入预算") {
          this.jurisdictionControl.budget = true;
        }
      });
    },
    DeleteAccount(subid) {
      // 删除账套的弹框和参数
      this.delDepParams = {
        subid,
      };
      this.delPopup = {
        title: "删除账套",
        isShow: true,
        describe: "此操作会将当前公司下所有用户的账号关闭（管理员除外）,不可登录,请谨慎操作",
      };
    },
    handleSizeChange(val) {
      this.ListParams.pageSize = val;
      this.GetSubCompanyPageList();
    },
    handleCurrentChange(val) {
      this.ListParams.pageIndex = val;
      this.GetSubCompanyPageList();
    },
    radioIncident(value, accountid) {
      // 单选显示或隐藏
      let isshow = 0;
      if (value) {
        isshow = 1;
      }
      let params = {
        accountid: accountid,
        isshow,
      };
      this.$api.accountPort.UpdateIsShow(params).then((res) => {
        if (res.data.status === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },

    GetAccountNum() {
      // 获取剩余账套数量
      this.$api.accountPort.GetAccountNum().then((res) => {
        if (res.data.status == 200) {
          this.howmany = res.data.data;
        } else {
          this.howmany = 0;
        }
      });
    },
    operation(data, type) {
      // 操作
      switch (type) {
        case "add":
          this.$store.commit("companyInfo/balance", true);
          this.$store.commit("companyInfo/checkCurtain", false);
          this.$store.commit("companyInfo/EditAccount", false);
          if (data.level == 0) {
            this.$router.push({ name: "addCompany", query: { jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          } else {
            // this.$store.commit('companyInfo/setPrint', data.subid) // 保存客户id
            // this.$router.push({ name: 'addCompany',query:{isAdd:true, subid:data.subid, jurisdictionControl: JSON.stringify(this.jurisdictionControl)}})
          }
          break;
        case "check":
          this.$router.push({ name: "checkCompany", query: { isCheck: true, jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          this.$store.commit("companyInfo/setPrint", data.subid); // 保存客户id
          this.$store.commit("companyInfo/checkCurtain", true); // 查看状态为true
          this.$store.commit("companyInfo/balance", false); // 新建状态为 false
          this.$store.commit("companyInfo/EditAccount", false); // 编辑状态为 false
          break;
        case "edit":
          this.$router.push({ name: "editCompany", query: { isEdit: true, jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          this.$store.commit("companyInfo/setPrint", data.subid); // 保存客户id
          this.$store.commit("companyInfo/checkCurtain", true); // 查看状态为true
          this.$store.commit("companyInfo/balance", false); // 新建状态为 false
          this.$store.commit("companyInfo/EditAccount", false); // 编辑状态为 false
          break;
        default:
          break;
      }
    },

    async EnterBuySellandStock(item) {
      // 进入进销存
      if (item.psiId) {
        this.goPurchase(item.psiId, item);
        return;
      }
      let params = {
        subid: item.subid,
        subName: item.subName,
      };
      this.$set(item, "isConfirmLoading1", true);
      let res = await this.$api.publicApi.SyncPsi(params);
      this.$set(item, "isConfirmLoading1", false);
      let psiId = res.data.data.psid;
      this.GetSubCompanyPageList();
      this.goPurchase(psiId, item);
    },

    goPurchase(psiId, item) {
      // 进入进销存
      let getTokenParams = {
        companyNumber: this.userInfo.Serial,
        companyId: this.userInfo.CompanyId,
        userName: this.userInfo.realname,
        PSIID: psiId, // 进销存的ID
        Password: this.userInfo.UserId,
        departmentId: this.userInfo.departmentid,
        jurisdictionid: this.salesId,
        isadmin: this.userInfo.isadmin,
        smallType: this.userInfo.smallType, // 版本
        is_machine_accounts: false, // 是否开通智能做账 bool类型
        tax_inspection_surpluscount: 0, //  财税检测盈余数 int类型
        tax_number: 0, // 税号
        uif: this.uif,
        PSIName: item.subName,
        curmoterid: item.subid,
        companylogo: this.userInfo.companylogo, // logo
        isChangeLogo: this.userInfo.isChangeLogo, // logo
      };
      let url = webUrl.psi;
      // if (process.env.NODE_ENV == "checkTest" || process.env.NODE_ENV == "development") {
      //   url = "http://8.142.139.164:8086";
      // } else if (process.env.NODE_ENV == "pre") {
      //   url = "http://39.107.26.138:8086";
      // } else if (process.env.NODE_ENV == "prod") {
      //   url = "https://psi.yundaizhang.com.cn";
      // } else if (process.env.NODE_ENV == "newProd") {
      //   url = "https://psi.zhangsanfeng.vip";
      // }
      console.log(getTokenParams, "getTokenParams");
      url += this.setUrlParam("getTokenParams", escape(JSON.stringify(getTokenParams)));

      // let JXCurl = url + '?companyNumber=' + getTokenParams.companyNumber
      //   + '&companyId=' + getTokenParams.companyId
      //   + '&userName=' + getTokenParams.userName
      //   + '&PSIID=' + getTokenParams.PSIID
      //   + '&Password=' + getTokenParams.Password
      //   + '&departmentId=' + getTokenParams.departmentId
      //   + '&uif=' + this.uif
      //   + '&jurisdictionid=' + getTokenParams.jurisdictionid
      //   + '&isAdmin=' + getTokenParams.isadmin + '&EnterpriseEdition=true'
      //   + '&smallType=' + getTokenParams.smallType
      //   + '&is_machine_accounts=' + getTokenParams.is_machine_accounts
      //   + '&tax_inspection_surpluscount=' + getTokenParams.tax_inspection_surpluscount
      //   + '&tax_number=' + getTokenParams.tax_number
      //   + '&random=' + Math.random() * 100;
      console.log(url, "url");
      window.open(url);
      this.$api.accountPort.OpenSellUrl({ subId: item.subid, subName: item.subName }); // 日*志;
    },
    Intothebudget(item) {
      // 预算
      if (item.accountNameList && item.accountNameList.length != 0) {
        //let NODE_ENV = process.env.NODE_ENV;
        let url = webUrl.budget; //NODE_ENV == "checkTest" || NODE_ENV == "development" ? "http://8.142.139.164:55005" : NODE_ENV == "pre" ? "http://39.107.26.138:55005" : NODE_ENV == "prod" ? "https://budget.zhangsanfeng.vip:55005" : "https://budget-test.zhangsanfeng.vip";
        let src = url + "?token=" + this.uif + "&EnterpriseId=" + item.subid + "&ztId=" + item.accountId + "&isChangeLogo=" + this.userInfo.isChangeLogo + "&companylogo=" + (this.userInfo?.companylogo ? this.userInfo?.companylogo : "") + "&random" + Math.random() * 100;
        window.open(src);
      } else {
        this.$message({
          message: "请先创建财务!",
          type: "warning",
        });
      }
    },
  },
  mounted() {
    // this.GetAccountNum()
    // this.GetSubCompanyPageList()
  },
  created() {
    this.getJurisdiction();
  },
  activated() {
    // if(this.$route.query.isGetData){ 、、2021-12-06 | 及时获取还原的账套和账套数量
    this.GetSubCompanyPageList();
    this.GetAccountNum();
    // }
    let query = this.$route.query;
    if (query.accountType == 2) {
      // 保存基本信息导入账套
      this.$router.push({ name: "Financial", query: { subid: query.subid, abbreviationName: query.abbreviationName, Import: true } });
    }
  },
  beforeRouteEnter(to, from, next) {
    // to.meta.title = sessionStorage.getItem('smallType') == 9 ? '财务账套' : '企业管理';
    next();
  },
  mixins: [common],
};
</script>
<style lang="less">
#cancelAccountContainer {
  overflow: hidden;
  padding: 15px 0;
  .delPopupContent {
    text-align: center;
    padding: 30px 0;
    > .iconfont {
      font-size: 100px;
      color: #dee3e9;
      line-height: 1;
    }
    > p {
      text-align: center;
      font-size: 17px;
      margin-top: 10px;
    }
  }
  .el-col-24 {
    width: 88%;
    height: 54px;
    text-align: center;
    box-shadow: 0px 0px 10px #d4dcf0;
    border: none;
    margin-top: 1.2%;
    margin-bottom: 1%;
    background-color: #f7f8fc;
    position: relative;
    left: 7%;
    float: left;
    .span_blo {
      height: 100%;
      line-height: 45px;
      display: flex;
      padding: 0px 40px;
      align-items: center;
      justify-content: space-between;
      .search {
        .el-input {
          width: 300px;
          height: 35px;
          .el-input__inner {
            // border-bottom: 1px solid #DEE3E9;
            width: 300px;
            background-color: transparent;
            padding-right: 38px;
          }
        }
        .el-input-group__append {
          width: 46px;
          height: 32px;
          padding: 0px !important;
          border: none;
          border-radius: 0px;
          border-bottom: 1px solid #dee3e9;
          font-size: 20px;
          color: #39a4ed;
          position: relative;
          left: -20px;
          .el-icon-search {
            font-size: 15px;
          }
        }
        .el-input-group {
          width: 300px;
          height: 35px;
        }
      }
      span {
        display: inline-block;
        margin-right: 10px;
        color: #98999b;
      }
      .text {
        color: #39a4ed;
      }
      .addCount {
        span {
          color: #39a4ed !important;
        }
        .addicon {
          font-size: 23px;
          cursor: pointer;
          position: relative;
          bottom: -3px;
        }
        .add {
          font-size: 16px;
          cursor: pointer;
        }
        &:hover {
          span {
            color: #118fe9 !important;
          }
        }
      }
    }
  }
  .subject {
    height: calc(100% - 120px);
    float: left;
    width: 100%;
    overflow: auto;
    .nodata {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      img {
        width: 20%;
      }
    }
    .el-col-24 {
      width: 88%;
      height: 150px;
      box-shadow: 0px 0px 10px #d4dcf0;
      .subject_top_span {
        float: left;
        width: 350px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 50px;
        margin-left: 3%;
        font-size: 15px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #39a4ed;
        }
      }
      .subject_top_List {
        height: 100%;
        float: right;
        .subject_top_item {
          float: left;
          color: #999;
          font-size: 13px;
          line-height: 50px;
          margin-right: 15px;
          cursor: pointer;
          .iconsize {
            font-size: 13px;
          }
          .item_span {
            margin-left: 2px;
          }
          .cunZtj {
            &:hover {
              color: #39a4ed;
            }
          }
        }
        .itemradio {
          margin-right: 4%;
          .el-radio {
            color: #bfc8d8;
            cursor: pointer;
            margin-right: 15px;
          }
          .item_span {
            margin-left: 0;
          }
        }
      }
      .combination {
        height: 65%;
        background-color: #ffffff;
        .subject_bottom_List {
          float: left;
          width: 30%;
          margin-left: 3%;
          li {
            text-align: left;
            span {
              display: inline-block;
              color: #999;
              font-size: 13px;
            }
            p {
              display: inline-block;
              margin-left: 5px;
              font-size: 13px;
              color: #515255;
            }
          }
          .item {
            margin-top: 20px;
          }
          .item_below {
            margin-top: 8px;
          }
        }
      }
    }
  }
  .paging {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pagingChild {
      float: right;
      margin-right: 5%;
      .el-pagination__total {
        line-height: 28px;
      }
    }
    .el-select-dropdown__list {
      padding-bottom: 12px;
    }
  }
}
.el-drawer__header {
  margin-bottom: 10px;
  border-bottom: 1px solid #dee3e9;
  padding: 0 0 0 20px;
  height: 40px;
  line-height: 40px;
}
.evenmoreList {
  li {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    padding-left: 15px;
    &:hover {
      background-color: #f1f1f1;
      color: #39a4ed;
    }
  }
}
</style>
